<template>
	<view class="content">
		<view class="shop_address">
			暂无门店信息
			<image src="../../static/shopcart/line.jpg" mode=""></image>
		</view>

		<!-- 付款商品 -->
		<view class="shop_buy">
			<text class="shop_total">共{{shoppList.length}}件商品</text>
			<view class="goods_shop" v-for="(item,index) in shoppList" :key="index">
				<view class="shop_img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shop_name">
					<view class="shop_info">
						<text>{{item.productName }}</text>
						<text>{{item.sku}}</text>
					</view>
					<view class="shop_price_num">
						<text class="shop_price">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 下单操作 -->
		<view class="shop_init_info">
			<!-- 优惠卷 -->
			<view>
				<u-popup :show="show1" @close="close" @open="open" :closeOnClickOverlay="true">
					<view>
						<u-empty mode="coupon" icon="http://cdn.uviewui.com/uview/empty/coupon.png">
						</u-empty>

					</view>
				</u-popup>
				<u-button @click="show1 = true">优惠券</u-button>
			</view>
			<!-- 积分 -->
			<view class="inte">
				<text>积分抵扣</text>
				<text class="init_now">当前积分{{addressList.userIntegral}}</text>
			</view>
			<!-- 联系人 -->
			<view class="contact">
				<view class="contact_ren">
					<text>联系人</text>
				</view>
				<view class="contact_inp">
					<input type="text" placeholder="请填写你的联系姓名">
				</view>
			</view>
			<!-- 联系电话 -->
			<view class="contact1">
				<view class="contact1_phone">
					<text>联系电话</text>
				</view>
				<view class="contact1_inp">
					<input type="text" placeholder="请填写你的联系电话">
				</view>
			</view>
			<!-- 备注信息 -->
			<view class="remark">
				<text class="remark_txt">备注信息</text>
				<u--textarea v-model="value" placeholder="请添加备注(150字以内)" count maxlength="150"></u--textarea>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="zhifu">
			<text class="zhifu_manner">支付方式</text>
			<view :class="{
				changered1:isChangeed1,
				wx_zhifu:true,
				changecolor:zhifuColor
			}" @click="wx_click">
				<u-icon name="weixin-circle-fill" color="green" size="25px" label="微信支付">
				</u-icon>
				<text>微信快捷支付</text>
			</view>
			<view :class="{
				changered1:isChangeed2,
				ye_zhifu:true,
				changecolor:zhifuColor
			}" @click="ye_click">
				<u-icon name="rmb-circle-fill" color="orange" size="25px" label="余额支付"></u-icon>
				<text>可用余额:{{addressList.userBalance}}</text>
			</view>

			<!-- 商品总价 -->
			<view class="shop_total">
				<text class="shop_total_text">商品总价：</text>
				<text>￥{{total}}</text>
			</view>

			<!-- 立即结算 -->
			<view class="jiesuan">
				<view class="heji">
					<text>合计:￥{{total}}</text>
				</view>
				<view>
					<u-button text="立即结算" shape="circle" type="error" class="pay_btn" color="red" @click="nav">
					</u-button>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getDefaultAddress,
		getShopCartPag,
		getOrderLoad,
		getOrderId,
	} from "../../network/shoppingCart.js"
	export default {
		data() {
			return {
				//优惠劵
				list1: [{
						name: '地址一'
					},
					{
						name: '地址二'
					}
				],
				isChangeed1: false,
				isChangeed2: false,
				show1: false, //优惠劵
				value: "", //统计字数
				addressList: {},
				shoppingCartId: "", //购物车id
				shoppCart: [], //购物车数据
				shoppList: [], //订单详情
				preOrderNo: "", //商品id
				zhifuColor: false,
				total: "", //总价

			}
		},
		created() {
			this.getOrder()
		},
		methods: {
			//优惠券
			close() {
				this.show1 = !this.show1
				// console.log('close');
			},
			open() {
				// this.show = false
				// console.log('close');
			},
			//获取订单商品
			async getOrder() {
				//获取购物车id
				let result = await getShopCartPag()
				let shoppCart = result.data.list
				for (let i = 0; i < shoppCart.length; i++) {
					this.shoppingCartId = result.data.list[i].id
				}
				console.log(this.shoppingCartId);

				//获取商品id
				let res = await getOrderId({
					orderDetails: [{
						shoppingCartId: this.shoppingCartId
					}],
					preOrderType: "shoppingCart"
				})
				this.preOrderNo = res.data.preOrderNo
				console.log(this.preOrderNo);


				let response = await getOrderLoad(
					this.preOrderNo
				)
				console.log(response);
				this.addressList = response.data.orderInfoVo

				//商品详情
				this.shoppList = this.addressList.orderDetailList
				for (let i = 0; i < this.shoppList.length; i++) {
					this.total = this.shoppList[i].price
				}
				console.log(this.shoppList);
			},
			//优惠券
			selectClick1(index) {
				this.show1 = !this.show1
				console.log(index)
			},
			//微信支付
			wx_click() {
				this.zhifuColor = !this.zhifuColor
				this.isChangeed1 = !this.isChangeed1
			},
			//余额支付
			ye_click() {
				this.zhifuColor = !this.zhifuColor
				this.isChangeed1 = !this.isChangeed1
			},
			//立即结算跳转
			nav() {
				uni.navigateTo({
					url: "../../subpackages/shoppingCart/paySuccess"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {

		//门店
		.shop_address {
			background-color: #fff;

			image {
				width: 100%;
				height: 1rpx;
				margin-top: -200rpx;
			}
		}

		//购买商品
		.shop_buy {
			width: 100%;
			// margin-top: 20rpx;
			padding: 15rpx;

			.shop_total {
				margin: 20rpx 0 15rpx 0;

			}

			//付款商品信息
			.goods_shop {
				display: flex;

				.shop_img {
					display: flex;
					padding-left: 15rpx;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}


				.shop_name {
					display: flex;
					flex-direction: column;
					padding-top: 30rpx;
					margin-left: 40rpx;

					.shop_info {
						display: flex;
						flex-direction: column;

						text {
							margin-bottom: 10rpx;
							font-size: 13px;
							width: 390rpx;
						}
					}

					.shop_price_num {
						display: flex;

						.shop_price {
							color: #E93323;
							font-size: 15px;
							font-weight: bold;
							margin-right: 100rpx;
						}
					}
				}
			}
		}



		.shop_init_info {
			padding: 15rpx;

			//积分
			.inte {
				border-bottom: 1px solid #ccc;
				height: 70rpx;
				line-height: 70rpx;

				.init_now {
					// margin-left: 450rpx;
					float: right;
				}
			}

			//联系人
			.contact {
				display: flex;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1px solid #ccc;

				.contact_ren {
					flex: 1;
				}

				.contact_inp {
					flex: 1;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center
				}
			}

			//联系电话
			.contact1 {
				display: flex;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1px solid #ccc;

				.contact1_phone {
					flex: 1;
				}

				.contact1_inp {
					flex: 1;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center
				}
			}

			//备注
			.remark {
				border-bottom: 1px solid #ccc;
				// height: 70rpx;
				line-height: 70rpx;

			}
		}

		//支付
		.zhifu {
			// display: inline-block;
			padding: 0rpx 15rpx;
			margin-top: 10rpx;

			.wx_zhifu {
				display: flex;
				padding: 20rpx 40rpx 20rpx 80rpx;
				border: 1px solid #ccc;
				margin: 20rpx 0;
				border-radius: 20rpx;

				text {
					width: 100%;
					margin-left: 400rpx;
				}
			}

			.changered1 {
				color: red;
			}

			.ye_zhifu {
				display: flex;
				padding: 20rpx 40rpx 20rpx 80rpx;
				border: 1px solid red;
				border-radius: 20rpx;

				text {
					width: 100%;
					margin-left: 400rpx;
				}
			}

			.changered2 {
				color: red;
			}
		}

		//总价
		.shop_total {
			margin: 15rpx 0;

			.shop_total_text {
				margin-right: 500rpx;
			}
		}

		//结算
		.jiesuan {
			display: flex;
			margin: 15rpx 0;

			.heji {
				margin-right: 500rpx;
			}
		}
	}
</style>
